<route lang="yaml">
meta:
  title: 大模型配置
</route>

<script lang="ts" setup>
import { saveCacheFromObject } from '@/utils/fs'

const openapiModel = ref({
  openapiType: '',
  baseUrl: '',
  modelName: '',
  apiKey: '',
})

const watchType = ref(openapiModel.value.openapiType)
const baseUrlDisable = ref(false)

watch(watchType, (val) => {
  if (val === '火山方舟') {
    openapiModel.value.baseUrl = 'https://ark.cn-beijing.volces.com/api/v3'
    baseUrlDisable.value = true
  }
  else {
    openapiModel.value.baseUrl = ''
    baseUrlDisable.value = false
  }
})

onMounted(() => {
  const openapiConfig = localStorage.openapiConfig
  if (openapiConfig) {
    const config = JSON.parse(openapiConfig)
    openapiModel.value.modelName = config.modelName
    openapiModel.value.apiKey = config.apiKey
    openapiModel.value.baseUrl = config.baseUrl
    if (openapiModel.value.baseUrl === 'https://ark.cn-beijing.volces.com/api/v3') {
      openapiModel.value.openapiType = '火山方舟'
      watchType.value = '火山方舟'
      baseUrlDisable.value = true
    }
    else {
      baseUrlDisable.value = false
    }
  }
})

function saveConfig() {
  saveCacheFromObject('openapiConfig', openapiModel.value)
}

function clearConfig() {
  openapiModel.value = { apiKey: '', baseUrl: '', modelName: '', openapiType: '' }
  watchType.value = '自定义'
  openapiModel.value.openapiType = '自定义'
  baseUrlDisable.value = false
}
</script>

<template>
  <div>
    <FaPageHeader>
      <template #title>
        <div class="flex items-center gap-4">
          ✨大模型配置🌟
        </div>
      </template>
      <template #description>
        <div class="text-sm/6">
          <div>
            功能：（必填）用于大模型信息配置，能够在其他模块进行AI调用。
          </div>
        </div>
      </template>
    </FaPageHeader>
    <FaPageMain>
      <el-form :model="openapiModel" label-width="auto" size="large">
        <!-- 快捷选项 -->
        <el-form-item label="openApi类型">
          <el-radio-group v-model="watchType" size="large">
            <el-radio-button label="火山方舟" value="火山方舟" />
            <el-radio-button label="自定义" value="" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="大模型URL">
          <el-input v-model="openapiModel.baseUrl" :disabled="baseUrlDisable" style="max-width: 600px;" />
        </el-form-item>
        <el-form-item label="模型名称">
          <el-input v-model="openapiModel.modelName" style="max-width: 600px;" />
        </el-form-item>
        <el-form-item label="ApiKey">
          <el-input v-model="openapiModel.apiKey" style="max-width: 600px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveConfig">
            保存配置
          </el-button>
          <el-button type="danger" @click="clearConfig">
            重置配置
          </el-button>
        </el-form-item>
      </el-form>
    </FaPageMain>
  </div>
</template>
